<!-- diff算法是什么 -->
React 在执行 render 过程中会产生新的虚拟 DOM, 
在浏览器平台下, 为了尽量减少 DOM 的创建, 
React 会对新旧虚拟 DOM 进行 diff 算法找到它们之间的差异, 尽量复用 DOM 从而提高性能; 
所以 diff 算法主要就是用于查找新旧虚拟 DOM 之间的差异

传统 diff 算法是通过循环递归对树节点进行依次对比, 效率比低下, 算法复杂度达到 O(n^3), 
而在 React 中针对该算法进行一个优化, 复杂度能达到 O(n)

<!-- diff 策略 -->
1.tree 层级(同层级比较): 考虑到在实际 DOM 操作中需要跨层级操作的次数很少很少,
 所以在进行 diff 操作时只会对 同一层级 进行比较, 
 这样只需要对树遍历一次就 OK 了, react 会按同层级进行比较,
 发现新树中 R 节点下没有了 A, 那么直接删除 A 在 D 节点下创建 A 以及下属所有节点

2.component 层级: 如果是同一个类型的组件, 则会继续往下 diff 运算,
 如果不是一个类型组件, 那么将直接删除这个组件下的所有子节点, 
 然后创建新的 DOM, 
 
 如下图所示, 当 D 类型组件换成了 G 后, 即使两者的结构非常类似, 也会将 D 类型的组件删除再重新创建 G

3.element 层级: 是同一层级的节点的比较规则, 根据每个节点在对应层级的唯一 key 作为标识, 
并且对于同一层级的节点操作只有 3 种, 
分别为 INSERT_MARKUP(插入)、MOVE_EXISTING(移动)、REMOVE_NODE(删除)

注意：
1.key 的值必须保证 唯一 且 稳定, 有了 key 属性后,
 就可以与组件建立了一种对应关系, react 根据 key 来决定是销毁还是重新创建组件, 是更新还是移动组件

2.index 的使用存在的问题: 大部分情况下可能没有啥问题, 
但是如果涉及到数据变更(更新、新增、删除),  这时 index 作为 key 会导致展示错误的数据, 
其实归根结底, 使用 index 的问题在于两次渲染的 index 是相同的, 所以组件并不会重新销毁创建, 而是直接进行更新